{strip}

{literal}

<script>
function changePassword(){
	$.ajax({
	   	type: "GET",
       	url: "/account/change-password",
		data: {
        },
        success: function(data){
          	showPopup(data, 'Change your current password', false);
		},
		error: function(xhr, statusText, errorThrown){
        	alert("Error");
		}
	});
}

function changeUsername(){
	$.ajax({
	   	type: "GET",
       	url: "/account/change-username",
		data: {
        },
        success: function(data){
          	showPopup(data, 'Change your current username', false);
		},
		error: function(xhr, statusText, errorThrown){
        	alert("Error");
		}
	});
}

function changeEmail(){
	$.ajax({
	   	type: "GET",
       	url: "/account/change-email",
		data: {
        },
        success: function(data){
          	showPopup(data, 'Change your current email address', false);
		},
		error: function(xhr, statusText, errorThrown){
        	alert("Error");
		}
	});
}

$(document).ready(function() {
	$('#file_upload').uploadify({
          'uploader'  : '/public/scripts/uploadify.swf',
          'script'    : '/upload',
          'cancelImg' : '/public/scripts/cancel.png',
          'auto'      : false,
          'method'	  : 'post',
          'multi'	:	false,
          'onComplete'  : function(event, ID, fileObj, response, data) {
          		
          		var obj = jQuery.parseJSON(response);
          		$('#filesId').val(obj.filesId);
          		$("#uploadBox").html('<img src="/minigen.php?filepath='+obj.path+'&filename='+obj.name+'&width=100&height=100&ext='+obj.ext+'" alt="laptop"/>');
          		//alert($('#filesId').val());
			},
			'onError'     : function (event,ID,fileObj,errorObj) {
			      alert(errorObj.type + ' Error: ' + errorObj.info);
			},
			'scriptData'  : {{/literal}'fileTypesId':'{$fileTypesId}', 'sessionId': '{$sessionId}','destination': '{$uploadDestination}'{literal}}
		
    });
    
	var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 
 
    $('#details_form').submit(function() { 
    	
        $(this).ajaxSubmit(options); 
        return false;
    }); 
});

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
} 
 
function showResponse(responseText, statusText)  { 
	//alert('Data has been saved');
	showPopup(responseText, 'User details', false);
}
</script>

<style>
#profile h1 {
	font-size: 20pt;
	margin-top: 10px;
	padding: 0px;
}

#profile .public_profile{
	font-size: 14pt;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #D8F5FF;
	-moz-border-radius: 8px;
}


#profile .content{
	font-size: 12pt;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #EEEEEE;
	/*-moz-border-radius: 8px;*/
}


#profile .left_side{
	font-size: 11pt;
	width: 180px;
}

#profile .right_side{
	font-size: 11pt;
	width: 350px;
	margin-bottom: 10px;
}

#profile input{
	width: 350px;
	border: 1px solid #CDDEE6;
	height: 25px;
}

#profile textarea{
	width: 350px;
	border: 1px solid #CDDEE6;
	height: 200px;
}

#profile .send{
	width: 80px;
	background-color: #FAFAFA;
	border-bottom: 2px solid #B6B6B6;
	border-right: 2px solid #B6B6B6;
	border-left: 1px solid #B6B6B6;
	border-top: 1px solid #B6B6B6;
	cursor: pointer;
}

</style>
{/literal}

<!-- content -->
<div id="content">
    <div id="content_left">
    <h1>Profile Settings</h1>
		<div id="profile" >
		<div class="public_profile">
			My public profile: <a href="/users/{$user->getUsername()}">http://xproject.kreatorsoftu.pl/users/{$user->getUsername()}</a>
		</div>
		<div class="content">
			<form method="POST" action="/account/save-profile" id="profileForm">
				<div class="left left_side">
					First Name
				</div>
				<div class="left right_side">
					<input type="text" name="addForm[firstName]" value="{$user->getFirstName()}" />
				</div>
				<div class="clear"></div>
				<div class="left left_side">
					Last Name
				</div>
				<div class="left right_side">
					<input type="text" name="addForm[lastName]" value="{$user->getLastName()}" />
				</div>
				<div class="clear"></div>
				{*<div class="left left_side">
					Email
				</div>
				<div class="left right_side">
					<input type="text" name="addForm[email]" value="{$user->getEmail()}" />
				</div>
				<div class="clear"></div>*}
				<div class="left left_side">
					Something about you
				</div>
				<div class="left right_side">
					<textarea rows="10" name="addForm[about]">{$user->getRemarks()}</textarea>
				</div>
				<div class="clear"></div>
				<div class="left left_side">
					Profile picture<br />
					<div id="uploadBox" class="form_image">{$user->getThumb(100,100,'zc')}</div>	
				</div>
				<div class="left right_side">
					<div id="uploadComponent" class="left">
						<input id="file_upload" name="file_upload" type="file" />
						<a href="javascript:$('#file_upload').uploadifyUpload();">Upload File</a>
					</div>
					<input id="filesId" type="hidden" name="addForm[filesId]" value=""/>
					<input id="mainImageId" type="hidden" name="addForm[mainImageId]" value="{$user->getMainImageId()}"/>
				</div>
				<div class="clear"></div>
				
					<input type="submit" value="Save" class="right pointer send"/>
				<div class="clear"></div>
				
			</form>
		</div>
		<div class="password" style="display: none;">
                    		<label>Email</label>
                    			<input disabled value="{$user->getEmail()}" name="addForm[sAddr][email]" type="text" style="background-color: #EEEEEE;"/><a href="#" onclick="changeEmail();"><em style="font-size: 9pt; color: #3FAEE3; margin-left: 3px; text-align: left;">(change)</em></a><br />
                    		<label>Username</label>
                    			<input disabled value="{$user->getUsername()}" name="addForm[sAddr][email]" type="text" style="background-color: #EEEEEE;"/><a href="#" onclick="changeUsername();"><em style="font-size: 9pt; color: #3FAEE3; margin-left: 3px; text-align: left;">(change)</em></a><br />	
                    		<label>Password</label>
                    			<input disabled value="{$user->getPassword()}" name="addForm[sAddr][email]" type="password" style="background-color: #EEEEEE;"/><a href="#" onclick="changePassword();"><em style="font-size: 9pt; color: #3FAEE3; margin-left: 3px; text-align: left;">(change)</em></a><br />
							<br /><br />
        </div>
                    	{*<!--<form id="details_form" method="POST" action="/account/save-details" onsubmit="">
                    	<div style="width: 95%; margin-top: 32px; margin-left: 10px;background-color:#F0F7FA;">
                    		<div class="left" style="width: 86%"><h4 style="padding: 10px;">Shipping Address</h4></div>
                    		<div class="right" style="padding-top: 12px; padding-right: 4px;"><a href="#" onclick="$('#details_form').submit();" style="padding: 8px; background-color: #FFFFFF; font-size: 10pt"><strong>Save</strong></a></div>
                    		<div class="clear"></div>
                    		<p style="font-size: 8pt; color: gray; margin-left: 130px; text-align: left; margin-top: 5px;">
                    			<i>Required</i>
                    		</p>
                    		<label>First Name</label>
                    			<input value="{$user->getSaddrFirstName()}" name="addForm[sAddr][firstName]" type="text" /><br />
                    			
                    		<label>Last Name</label>
                    			<input value="{$user->getSaddrLastName()}" name="addForm[sAddr][lastName]" type="text" /><br />
                    			
                    		<label>Email</label>
                    			<input value="{$user->getSaddrEmail()}" name="addForm[sAddr][email]" type="text" /><br />
                    			
                    		<label>Street and No.</label>
                    			<input value="{$user->getSaddrStreet()}" name="addForm[sAddr][street]" type="text" style="width: 113px;"/>
                    			&nbsp;<input value="{$user->getSaddrBuildingNo()}" name="addForm[sAddr][buildingNo]" type="text"style="width: 25px;"/>
                    			/<input value="{$user->getSaddrApartmentNo()}" name="addForm[sAddr][apartmentNo]" type="text" style="width: 25px;"/><br />
                    			
                    		<label>Zip and City</label>
                    			<input value="{$user->getSaddrPostcode()}" name="addForm[sAddr][postcode]" type="text" style="width: 65px;"/>
                    			&nbsp;<input value="{$user->getSaddrCity()}" name="addForm[sAddr][city]" type="text" style="width: 118px;"/><br />
                    			
                    		<label>Country</label>
                    			<select name="addForm[sAddr][country]" style="width: 210px; height: 25px;">
									{foreach from=$countries item=c}
										<option value="{$c->getCountry()}" {if $user->getSaddrCountry() == $c->getCountry()}selected{/if}>{$c->getCountry()}</option>
									{/foreach}
								</select><br />
								<p style="font-size: 9pt; color: #3FAEE3; margin-left: 130px; text-align: left; margin-top: 5px;">
                    			<a href="#" style="font-size: 9pt; color: #3FAEE3; cursor: pointer;" onclick="$('#billingAddr').show();"><em>Differing billing address?</em></a>
                    		</p>
							<br /><br />
                    	</div> 
                    	
                    	<div id="billingAddr" style="width: 95%; margin-top: 5px; margin-left: 10px;background-color:#FDF0E3;display: none;">
                    		<div class="left" style="width: 86%"><h4 style="margin-left: 30px;">Billing Address</h4></div>
                    		<div class="right" style="padding-top: 12px; padding-right: 4px;"><a href="#" onclick="$('#billingAddr').hide();" style="padding: 8px; background-color: #FFFFFF; font-size: 12pt"><strong>x</strong></a></div>
                    		<div class="clear"></div>	
                    		
                    		<label>Company</label>
                    			<input value="{$user->getBaddrCompanyName()}" name="addForm[bAddr][companyName]" type="text" /><br />
                    			
                    		<label>First Name</label>
                    			<input value="{$user->getBaddrFirstName()}" name="addForm[bAddr][firstName]" type="text" /><br />
                    			
                    		<label>Last Name</label>
                    			<input value="{$user->getBaddrLastName()}" name="addForm[bAddr][lastName]" type="text" /><br />
                    			
                    		<label>Email</label>
                    			<input value="{$user->getBaddrEmail()}" name="addForm[bAddr][email]" type="text" /><br />
                    			
                    		<label>Street and No.</label>
                    			<input value="{$user->getBaddrStreet()}" name="addForm[bAddr][street]" type="text" style="width: 113px;"/>
                    			&nbsp;<input value="{$user->getBaddrBuildingNo()}" name="addForm[bAddr][buildingNo]" type="text" style="width: 25px;"/>
                    			/<input value="{$user->getBaddrApartmentNo()}" name="addForm[bAddr][apartmentNo]" type="text" style="width: 25px;"/><br />
                    			
                    		<label>Zip and City</label>
                    			<input value="{$user->getBaddrPostcode()}" name="addForm[bAddr][postcode]" type="text" style="width: 65px;"/>
                    			&nbsp;<input value="{$user->getBaddrCity()}" name="addForm[bAddr][city]" type="text" style="width: 118px;"/><br />
                    			
                    		<label>Country</label>
                    			<select name="addForm[bAddr][country]" style="width: 210px; height: 25px; text-align: left;">
									{foreach from=$countries item=c}
										<option value="{$c->getCountry()}" {if $user->getBaddrCountry() == $c->getCountry()}selected{/if}>{$c->getCountry()}</option>
									{/foreach}
								</select><br /><br />
								
							<br /><br />
                    	</div>
                    	</form>
                    	<div style="height: 100px;"> </div>-->*}
                    	
               	<div class="clear"></div>
		</div>
	</div>
		<div id="content_right">
			
            {include file='account/menu.tpl'}
		</div>
</div>

<!-- end content  -->
{/strip}